<template>
    <div class="cricle-rankings" >
        <div v-for="i in listnav" :key="i.id">
            <ul>
                <li @click="fun(i.id)">
                    <img :src="$Url+i.image" alt="">
                    <p>{{i.name}}</p>
                    <p  :class="color">热度123</p>
                </li>
            </ul>

        </div>

        <div style="clear: both"></div>
        <span>更多排行</span>

    </div>
</template>

<script>
    export default {
        name: "CricleRankings",
        data () {
            return {
                color:{
                color: '#FE5371',
               },
                listnav:[]
            }
        },
        created () {
          this.getinfo()
        },
        methods :{
            fun (id) {
                this.$router.push({path:'/circleclassification',query:{id:id}})
            },
            getinfo() {
                let _this =this
                _this.$post('/api/circle/CircleList',
                    {

                    }, function (res) {
                        _this.listnav = res.data
                        console.log(res)

                    }, function (errmsg) {
                        _this.$message.error(errmsg);
                    })
            }
        }

    }
</script>

<style scoped lang="less">
    .cricle-rankings{
        span{
            display: block;
            width: 260px;
            height: 40px;
            background-color: #fe546f;
            border-radius: 4px;
            font-size: 16px;
            color: #ffffff;
            text-align: center;
            margin-top: 20px;
            line-height: 40px;
            margin-right: 5px;
        }
        ul{
            li{
                width: 45%;
                float: left;
                margin-top: 10px;
                margin-left: 10px;
                margin-bottom: 10px;
                img{
                    width: 35px;
                    height: 35px;
                    border-radius: 50%;
                    float: left;
                }
                p{
                    float: left;
                    padding-left: 10px;
                }
                >:nth-child(2){
                    color: #333333;
                    font-size: 12px;
                }
                >:last-child{
                    color: #9e9e9e;
                    font-size: 12px;
                }
                .color{
                    color: #FE5371;
                }

            }
        }
    }
</style>